<!-- components/tabs/PersonalInfo.vue -->
<template>
    <div class="personal-info">
        <!-- <div class="info-section"> -->
        <h3 align="center">基本信息</h3>
        <div class="wrapper">
            <el-row v-for="(item, index) in baseInfoTable" :key="index" class="table-col">
                <el-col v-for="(table, index2) in item" :key="index2" :span="6" class="table-item">
                    <span class="label">{{ table.title }}</span>
                    <span class="value">{{ table.value }}</span>
                </el-col>
            </el-row>
        </div>
        <!-- </div> -->

        <h3 align="center">在校信息</h3>
        <div class="wrapper">
            <el-row v-for="(item, index) in list2" :key="index" class="table-col">
                <el-col v-for="(table, index2) in item" :key="index2" :span="24 / item.length" class="table-item">
                    <span class="label">{{ table.title }}</span>
                    <span class="value">{{ table.value }}</span>
                </el-col>
            </el-row>
        </div>

        <h3 align="center">家长信息</h3>
        <div class="wrapper">
            <el-row justify="center">
                <el-col :span="10" class="parent-card__col">
                    <el-card shadow="hover">
                        <div class="parent-card">
                            <div class="parent-card__title">父亲</div>
                            <img src="@/assets/broadwise.png" class="parent-card__icon" alt="" />
                            <div class="parent-card__content">
                                <div class="parent-card__avatar">
                                    <img
                                        src="@/assets/father.png"
                                        class="parent-card__avatar-img"
                                        style="width: 120px; height: 120px"
                                        alt="父亲"
                                    />
                                    <div class="parent-card__name" style="text-align: center">
                                        {{ father?.name }}
                                    </div>
                                </div>
                                <div class="parent-card__info">
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">工作单位：</div>
                                        <div class="parent-card__info-value">
                                            {{ father?.office }}
                                            <br />
                                        </div>
                                    </div>
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">职位：</div>
                                        <div class="parent-card__info-value">
                                            {{ father?.career }}
                                            <br />
                                        </div>
                                    </div>
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">电话：</div>
                                        <div class="parent-card__info-value">
                                            {{ father?.phone }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10" class="parent-card__col">
                    <el-card shadow="hover">
                        <div class="parent-card">
                            <div class="parent-card__title">母亲</div>
                            <img src="@/assets/broadwise.png" class="parent-card__icon" alt="" />
                            <div class="parent-card__content">
                                <div class="parent-card__avatar">
                                    <img
                                        src="@/assets/mother.png"
                                        class="parent-card__avatar-img"
                                        style="width: 120px; height: 120px"
                                        alt="母亲"
                                    />
                                    <div class="parent-card__name" style="text-align: center">
                                        {{ mother?.name }}
                                    </div>
                                </div>
                                <div class="parent-card__info">
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">工作单位：</div>
                                        <div class="parent-card__info-value">
                                            {{ mother?.office }}
                                        </div>
                                    </div>
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">职位：</div>
                                        <div class="parent-card__info-value">
                                            {{ mother?.career }}
                                        </div>
                                    </div>
                                    <div class="parent-card__info-item">
                                        <div class="parent-card__info-label">电话：</div>
                                        <div class="parent-card__info-value">
                                            {{ mother?.phone }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
<!--        <el-button type="primary" class="export-button" @click="showExportDialog">导出学生数据</el-button>-->

        <el-dialog v-model="dialogVisible" title="导出学生信息" width="62%" center>
            <el-table :data="exportData">
                <el-table-column property="姓名" label="姓名" />
                <el-table-column property="性别" label="性别" />
                <el-table-column property="出生日期" label="出生日期" width="100" />
                <el-table-column property="手机" label="手机" width="120" />
                <el-table-column property="学院" label="学院" width="120" />
                <el-table-column property="专业" label="专业" width="150" />
                <el-table-column property="班级" label="班级" width="200" />
                <el-table-column property="政治面貌" label="政治面貌" />
                <el-table-column property="学历类型" label="学历类型" />
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportStudentData">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
export default {
    computed: {
        father() {
            return { ...this.parentsInfo.father }
        },
        mother() {
            return { ...this.parentsInfo.mother }
        },
    },
}
</script>
<script setup>
import { ref, computed, watchEffect } from 'vue'

const props = defineProps({
    student: Object,
})

const father = ref({})
const mother = ref({})
const baseInfo = ref({})
const schoolInfo = ref({})
const parentsInfo = ref({})

const baseInfoData = ref({})
const schoolInfoData = ref({})
const baseInfoTable = computed(() => {
    const baseInfo = { ...baseInfoData.value }

    return [
        [
            { title: '姓名:', value: baseInfo.name },
            { title: '性别:', value: baseInfo.gender },
            { title: '出生日期:', value: baseInfo.birthday },
            { title: '身份证号:', value: baseInfo.id },
        ],
        [
            { title: '民族:', value: baseInfo.nation },
            { title: '籍贯:', value: baseInfo.ancestry },
            { title: '户口:', value: baseInfo.address },
            { title: '婚姻状况:', value: baseInfo.married ? '已婚' : '未婚' },
        ],
        [
            { title: '手机:', value: baseInfo.phone },
            { title: '政治面貌:', value: baseInfo.political },
            { title: '所属党支部:', value: baseInfo.org ? baseInfo.org : '无' },
        ],
    ]
})

const list2 = computed(() => {
    if (!schoolInfo.value) return []

    return [
        [
            {
                title: '学历类型:',
                value: schoolInfo.value.grade,
            },
            {
                title: '学院:',
                value: schoolInfo.value.school,
            },
            {
                title: '专业:',
                value: schoolInfo.value.major,
            },
            {
                title: '班级:',
                value: schoolInfo.value.major + schoolInfo.value.cls,
            },
        ],
        [
            {
                title: '生源类型:',
                value: schoolInfo.value.source,
            },
            {
                title: '学制:',
                value: schoolInfo.value.span,
            },
            {
                title: '入学时间:',
                value: schoolInfo.value.entry_date,
            },
            {
                title: '毕业时间:',
                value: schoolInfo.value.grad_date
                    ? schoolInfo.value.grad_date
                    : new Date(schoolInfo.value.entry_date).getFullYear() +
                      schoolInfo.value.span +
                      '-' +
                      (((new Date(schoolInfo.value.entry_date).getMonth() + 9) % 12) + 1) +
                      '-' +
                      new Date(
                          new Date(schoolInfo.value.entry_date).getFullYear(),
                          (new Date(schoolInfo.value.entry_date).getMonth() + 1 + 5) % 12,
                          0
                      ).getDate() +
                      '（预计）',
            },
        ],
    ]
})

const dialogVisible = ref(false)
const showExportDialog = () => {
    dialogVisible.value = true
}

const exportData = computed(() => {
    const data = [
        {
            姓名: baseInfoData.value.name,
            性别: baseInfoData.value.gender,
            出生日期: baseInfoData.value.birthday,
            手机: baseInfoData.value.phone,
            学院: schoolInfoData.value.school,
            专业: schoolInfo.value.major,
            班级: schoolInfoData.value.major + schoolInfoData.value.cls,
            政治面貌: baseInfoData.value.political,
            学历类型: schoolInfoData.value.grade,
        },
    ]

    return data
})
const exportStudentData = () => {
    const csvContent = 'data:text/csv;charset=utf-8,' + convertToCSV(exportData.value)

    const link = document.createElement('a')
    link.setAttribute('href', encodeURI(csvContent))
    link.setAttribute('download', 'student_data.csv')

    link.click()
    dialogVisible.value = false
}

const convertToCSV = (data) => {
    const rows = []

    const headers = Object.keys(data[0])
    rows.push(headers.join(','))

    data.forEach((item) => {
        const values = Object.values(item)
        rows.push(values.join(','))
    })

    return rows.join('\n')
}

const fetchData = async () => {
    try {
        parentsInfo.value = props.student.parentsInfo
        father.value = props.student.parentsInfo.father
        mother.value = props.student.parentsInfo.mother
        baseInfo.value = props.student.baseInfo
        schoolInfo.value = props.student.schoolInfo
    } catch (error) {
        console.error(error)
    }
}

watchEffect(() => {
    if (props.student) {
        baseInfoData.value = { ...props.student.baseInfo }
        schoolInfoData.value = { ...props.student.schoolInfo }
    }
    fetchData()
})
</script>

<style lang="less" scoped>
@card-bg-color: #fff;
@card-shadow-hover: 0px 4px 8px rgba(0, 0, 0, 0.1);
@parent-card-icon: url('~@/assets/broadwise.png');
@parent-card-father: url('~@/assets/father.png');
@parent-card-mother: url('~@/assets/mother.png');

.personal-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e8e8e8;

    .wrapper {
        width: 90%;
        background-color: white;
        margin-bottom: 20px;

        .table-col {
            display: flex;
            border: solid 1px #cedded;

            .table-item {
                display: flex;

                .label {
                    background: #d1deeb;
                    display: flex;
                    align-items: center;
                    min-width: 85px;
                    text-align: left;
                    padding: 8px 12px;
                }

                .value {
                    background: white;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    word-wrap: break-word;
                    font-size: 14px;
                    padding: 8px 12px;
                }
            }
        }
    }
}

.parent-card__col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px;
    flex-wrap: wrap;
}

.el-row {
    width: 100%;

    &.justify-center {
        justify-content: space-around;
        margin-bottom: 20px;

        .el-col {
            flex: 1;
            padding: 0 10px;
            box-sizing: border-box;
        }
    }
}

.el-card {
    margin: 20px;
    width: 100%;
    max-width: 550px;
    border-radius: 5px;
    background-color: @card-bg-color;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &:hover {
        box-shadow: @card-shadow-hover;
    }

    .parent-card {
        &__title {
            font-size: 16px;
            font-weight: bold;
        }

        &__icon {
            width: 35px;
            height: 25px;
            display: block;
            background-image: @parent-card-icon;
        }

        &__content {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            max-height: 220px;

            &__avatar {
                flex-basis: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;

                &__avatar-img {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    margin-bottom: 10px;

                    &.father {
                        background-image: @parent-card-father;
                    }

                    &.mother {
                        background-image: @parent-card-mother;
                    }
                }

                &__name {
                    font-size: 18px;
                    font-weight: bold;
                    text-align: center;
                }
            }

            &__info {
                display: flex;
                flex-direction: column;

                &-item {
                    margin-bottom: 10px;

                    &__label {
                        color: #666;
                        margin-right: 10px;
                    }

                    &__value {
                        color: #333;
                    }
                }
            }
        }
    }
}
.export-button {
    position: absolute;
    top: 20px;
    right: 75px;
}
</style>
